import React, { Component } from 'react'

export default class ClassChilder extends Component {
  // 定义
  state = {
    count: 0,
    test: '哈哈',
    obj: {name:'xx',age: 12}
  }
  // 修改
  add = () => {
    /*
    方式一
    this.setState({
      count: this.state.count + 1,
      obj: {...this.state.obj, name:'xxx'}
    })
    */
    
    // 方式二
    this.setState(preVal => {
      return {
        count: preVal.count + 1,
        obj: {...preVal.obj, name:'xxx'}
      }
    })
    
    console.log('this.divRef',this.divRef.current)
  }

  // 创建属性存储 DOM 对象
  divRef = React.createRef()
  render() {
    // console.log('this.divRef',this.divRef)
    let {name,age,sex} = this.props
    let {count,test,obj} = this.state
    return (
      <div ref={this.divRef}>
        <h3>{count}-{test}/{obj.name}-{obj.age}</h3>
        <button onClick={this.add}>+</button>
        <ul>
          <li>姓名：{name}</li>
          <li>年龄：{age}</li>
          <li>性别：{sex}</li>
        </ul>
      </div>
    )
  }
}
